// 1.渲染数据 发送Ajax

// 立即执行函数
(function () {

    let layer = layui.layer;
    let form = layui.form;

    // 调用函数
    getData()
    // 页面一刷新就 发送Ajax 渲染数据
    function getData() {

        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(({
            data: res
        }) => {
            // console.log(res.data)
            const Getdata = res.data.map(item => {
                const {
                    Id,
                    name,
                    alias,
                } = item
                return `
                <tr>
                    <td>${Id}</td>
                    <td>${name}</td>
                    <td>${alias}</td>
                    <td>
                    <button class="layui-btn" lay-submit layui-btn-sm"  id="amend"" data-id=${Id}>修改</button>
                    <button class="layui-btn" lay-submit layui-btn-sm delete"  id="delete" data-id=${Id} >删除</button>
                    </td>
                </tr>`
            }).join('')

            $('tbody').html(Getdata)
        })
    }

    // 需求2 点击添加分类 就能
    let indexAdd = null
    $('#btnAddCate').on('click', function () {

        indexAdd = layer.open({
            title: '添加文章分类',
            // 默认为0 1为页面层
            type: 1,
            Boolean: 1,
            area: ['520px', '280px'],
            offset: '100px',
            content: $('#tpl-table').html()
        });
    })

    // 3.通过代理的形式 来实现表单的提交事件
    $('body').on('submit', '#formAdd', function (e) {
        // 阻止默认行为
        e.preventDefault()
        // 发送Ajax
        axios({
            method: 'post',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            layer.msg('恭喜您 添加图书列表成功')
            // 成功后 根据索引值     关闭弹出层
            layer.close(indexAdd)
            // 调用函数
            getData()
        })

    })

    let amendIndex = null
    // 4.通过代理的形式 实现表单的点击事件
    $('tbody').on('click', '#amend', function (e) {
        amendIndex = layer.open({
            title: '修改文章分类',
            type: 1,
            area: ['520px', '280px'],
            content: $('#tpl-amend').html()
        });
        let id = e.target.dataset.id

        // 调用渲染修改页面函数
        getTime()
        // 渲染修改页面函数
        function getTime() {
            // 发送Ajax 通过id值 渲染数据
            axios({
                method: 'GET',
                url: '/my/article/cates/' + id,
            }).then(({
                data: res
            }) => {
                console.log(res);
                form.val('dialog', res.data)
            })
        }

        // 修改表单
        $('body').on('submit', "#dialog", function (e) {
            // 阻止默认行为
            e.preventDefault()
            // 发送Ajax
            axios({
                method: 'POST',
                url: '/my/article/updatecate',
                data: $(this).serialize()
            }).then(({
                data: res
            }) => {
                console.log(res);
                if (res.status !== 0) {
                    layer.close(amendIndex)
                    return layer.msg("管理员不允许修改这个分类", {
                        icon: 2
                    })
                }
                layer.msg('恭喜您 更新成功!', {
                    icon: 1
                });
                layer.close(amendIndex)
                // 调用函数
                getData()
            })
        })

        // 重置表单
        $('body').on('reset', "#dialog", function (e) {
            // 阻止默认行为
            e.preventDefault()
            // 渲染页面
            getTime()
        })





    })

    // 删除表单类
    let deleteIndex = null
    $('tbody').on('click', '#delete', function (e) {
        // console.log(11);
        deleteIndex = layer.confirm('确认删除此分类吗？', {
            icon: 3,
            area: ['520px', '200px'],
        }, function (index) {
            let id = e.target.dataset.id
            console.log(id);
            // 发送Ajax
            axios({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
            }).then(({
                data: res
            }) => {
                if (res.status !== 0) {
                    layer.close(deleteIndex)
                    return returnlayer.msg("管理员不允许删除这个分类", {
                        icon: 2
                    })
                }
                return returnlayer.msg("恭喜您 删除成功", {
                    icon: 1
                })
            })
            layer.close(deleteIndex)
            // 调用函数
            getData()
        });
    })


})()